<h2><?php echo $this->translate("Ajax User Informer Plugin") ?></h2>

<?php if( count($this->navigation) ): ?>
  <div class='tabs'>
    <?php
      // Render the menu
      //->setUlClass()
      echo $this->navigation()->menu()->setContainer($this->navigation)->render();
    ?>
  </div>
<?php endif; ?>

<div class="msep-settings">
      <div>
            <div>
                  <h3>Visual Settings</h3>
                  <p class="form-description"><?php echo $this->translate("These settings affect to the look of the user information popups."); ?></p>

                  <div style="margin-bottom: 20px;">
                        <div id='example_box' style='display: block;'>
                              <table cellspacing="0" cellpadding="0" style="width: 100%;">
                                    <tbody>
                                          <tr>
                                                <td valign="top" style="width: 200px;">
                                                      <img src="<?php echo $this->baseUrl()."/application/modules/AjaxUserInformer/externals/images/example_thumb.jpg"; ?>" alt="thumb" />
                                                </td>
                                                <td valign="top" style="padding-left: 10px;">
                                                      <table cellspacing="0" cellpadding="0">
                                                            <tbody>
                                                                  <tr>
                                                                        <td valign="top" style="font-weight: bold;"><?php echo $this->translate("Mutual Friends"); ?></td>
                                                                        <td valign="top" style="text-align: right;"><a href="#">(1)</a></td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td colspan="2" style="padding: 10px 0pt 5px;">
                                                                              <a href="/SE4S/profile/example" title="Example User">
                                                                                    <img style="padding: 2px; float: left;" src="<?php echo $this->baseUrl()."/application/modules/AjaxUserInformer/externals/images/example_thumb_small.jpg"; ?>" alt="thumb" />
                                                                              </a>
                                                                        </td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td colspan="2" style="font-weight: bold; padding: 5px 0pt; white-space: nowrap;"><?php echo $this->translate("Personal Information"); ?></td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td valign="top" style="padding: 3px 10px 3px 0pt;">First Name</td>
                                                                        <td valign="top" style="padding: 3px 10px 3px 0pt;">Test</td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td valign="top" style="padding: 3px 10px 3px 0pt;">Last Name</td>
                                                                        <td valign="top" style="padding: 3px 10px 3px 0pt;">User</td>
                                                                  </tr>
                                                                  <tr>
                                                                        <td valign="top" style="padding: 3px 10px 3px 0pt;">Birthday</td>
                                                                        <td valign="top" style="padding: 3px 10px 3px 0pt;">Apr 3, 1990</td>
                                                                  </tr>
                                                            </tbody>
                                                      </table>
                                                </td>
                                          </tr>
                                    </tbody>
                              </table>
                        </div>
                  </div>

                  <?php echo $this->translate("<span style=\"font-weight: bold;\">Notice</span><span>: user information popup above does not contain information selected in <br />General Settings - above is just an example.<br /><br /></span>"); ?>

                  <?php echo $this->form->render($this); ?>
            </div>
      </div>
</div>

<script type="text/javascript">
//<![CDATA[
window.addEvent('load', function()
{
    var example_id = msep.core.round.register(getById('example_box'), {
                  'tl': getById('ajaxui_corner_tl_radius').value,
                  'tr': getById('ajaxui_corner_tr_radius').value,
                  'bl': getById('ajaxui_corner_bl_radius').value,
                  'br': getById('ajaxui_corner_br_radius').value,
                  'border': getById('ajaxui_border_width').value,
                  'border-color': getById('ajaxui_border_color').value,
                  'padding-left': 15,
                  'padding-right': 15,
                  'padding-top': 15,
                  'padding-bottom': 13,
                  'background-color': getById('ajaxui_background_color').value
    });

    msep.core.round.draw(example_id);

    <?php foreach ($this->fields as $field_value): ?>
    var update_<?php echo $field_value; ?> = function(obj)
    {
          msep.core.round.setOptions(example_id,
          {
                '<?php echo str_replace('_', '-', $field_value); ?>': obj.value
          });

          getById('example_box').innerHTML = msep.core.round.elements[example_id][3];
          msep.core.round.draw(example_id);
    };

    getById('ajaxui_<?php echo $field_value; ?>').onchange = function()
    {
          update_<?php echo $field_value; ?>(this);
    };

    getById('ajaxui_<?php echo $field_value; ?>').onkeyup = function()
    {
          update_<?php echo $field_value; ?>(this);
    };
    <?php endforeach; ?>
});
//]]>
</script>
